<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/together.css" rel="stylesheet" />

		<style>
			
			/*.mui-btn {
				padding: 10px;
			}*/
			.mui-table-view-cell>a:not(.mui-btn){
				
			}
			.list{
				padding: 5px;
			}
			.list>div{
				padding: 2px;
			}
			.ws_card_con{
				border-radius: 10px;
			}
			img{
				border-radius: 10px;
			}
			.ic{
				height: 100%;
				display: flex;
				align-items: center;
				font-family: Muiicons;
			    font-size: 30px;
			    line-height: 1;
			    z-index: 20;
			    padding-top: 10px;
			    padding-bottom: 10px;
			   
			}
			/*.ws_card_con{ 
				position:relative; 
				height:11em;   
			}*/
			.ws_headerBg{
				height: 140px;
				width:100%; z-index: 2;
				background:url(../images/together_tbg.png);
				background-size:100% 100%;
			}
			.ws_books_list{position:absolute; top:60px;  }
			.ws_nobooks{ width:93% ;height:auto; position:absolute; top:0px; left:50%; transform:translateX(-50%); z-index: 10;}
			.ws_nobooks_text{ background:#fff; padding:.7rem .6rem .5rem; text-align: center; color:#7D7D7D; font-size:14px; margin-top:-5px;}
			.gbl{
				background-color: RGBA(126,177,254,1);
			}
			header{
				-webkit-box-shadow: 0 0 0 rgba(0,0,0,0) !important;
				box-shadow: 0 0 0 rgba(0,0,0,0) !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar m_barw gbl">
		    <h1 class="mui-title">一起写</h1>
		    <a class="ic mui-icon-right-nav mui-pull-right" id="new_books">+</a>
		   
		</header>
        	<div class="mui-content">
				<div class="ws_headerBg"></div>
				<div class="mui-scroll ws_books_list">
					<div class="list" id="list">
						
					</div>
				</div>
			</div>
			<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/mui.min.js"></script>
			<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var count = 0,page = 1;
			window.onload = function(){
				mui.init();
				getbooks();
				addtap("new_books");
				
			}
			function addtap(id){
				gid(id).addEventListener('tap', function(event) {
					mui.openWindow({
						url: 'new_books.html',
						id: 'new_books',
					});
				}, false);
			}
			function getbooks(){
				let data ={
					url:"/api/Book/book_list",
					data:{
						access_token:acctoken()||"",
						page:page,
					}
				}
				ajax(data,function(res){
							console.log(res);
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){
								let data = res.data;
								//let table = document.body.querySelector('.list');
								let table = g('list');
								if(data.length>0){
									let array = [];
									for (let i = 0; i < data.length;i++) {
										let li = document.createElement('div');
										let str = '<div class="mui-card-content ws_card_con">'+
										'<div class="ws_card_authority">公开</div>'+
										'<h1 class="ws_card_title">'+ data[i].title+'</h1> '+
										'<img src="../images/yuantiao.jpg" onclick="gobook('+data[i].id+')"/> '+
										'<a class="ws_card_content">文章'+i+'篇</a>'+
										'<a class="ws_card_members">成员2个</a></div>';
										array.push(str);
										/*li.className = 'mui-card-content ws_card_con';
										li.innerHTML = '<div class="ws_card_authority">公开</div> '+
														'<h1 class="ws_card_title">'+ data[i].title+'</h1> '+
														'<img src="../images/yuantiao.jpg" onclick="gobook('+data[i].id+')"/> '+
														'<a class="ws_card_content">文章'+i+'篇</a>'+
														'<a class="ws_card_members">成员2个</a>';*/
									}
									table.innerHTML = array.join('');
								}else{
									let str ='<div class="ws_nobooks">'+
											'<div class="ws_nobooks_img">'+
											'<div class="ws_100 ">'+
											'<img src="../images/nobooks.png" alt="" /></div>'+
											
											'<div class="ws_nobooks_text">'+
												'我们一直在旅行,一直在等待某个人可以成为我们旅途的伴侣，陪我们走过一段别人无法代替的记忆。在那里，有我们特有的记忆,有我们特有的记忆，亲情之忆、友谊之花、爱情之树、以及遗憾之泪！'+
											'</div></div><div class="flex1">'+
											'<button type="button" class="mui-btn mui-btn-outlined btn nobooks_btn" id="new_books1">增加书籍</button>'+
											'</div></div>';
									
									table.innerHTML=str;
									addtap("new_books1");
								}
								
							}
						});
			}
			
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.list');
					var cells = document.body.querySelectorAll('.list');
					var array = [];
					for (var i = cells.length, len = i + 1; i < len; i++) {
						var li = document.createElement('div');
						li.className = 'mui-card-content ws_card_con';
						li.innerHTML = '<div class="ws_card_authority">公开</div> \
											<h1 class="ws_card_title">'+i+'</h1> \
											<img src="../images/yuantiao.jpg" /> \
											<a class="ws_card_content">文章'+i+'篇</a> \
											<a class="ws_card_members">成员2个</a>\
										';
						table.appendChild(li);
					}
					
				}, 1500);
			}
			
			function gobook(id){
				console.log('test');
				mui.openWindow({
							url: 'books_detas.html?bid='+id,
							id: 'books_detas',
						});
			}
			function gid(id){
				return document.getElementById(id);
			}
		</script>
	</body>

</html>